<template>
    <div style="display: flex; justify-content: center;">
    <el-button type="primary" class="custom-button"  @click="clock =true"   round >员工打卡</el-button>
    </div>
    <el-calendar v-model="value"/>
    
    <!-- 打卡 -->
     <el-drawer v-model="clock" title="I am the title" direction="ltr" size="650px" :with-header="false">
      <span>请打卡!</span><br><br>
      <div class="box">
        <el-form  :model="ruleForm" :rules="rules" ref="ruleFormsss" label-width="100px">
          <el-form-item label="打卡日期" prop="edate">
                  <el-input  v-model="ruleForm.edate" placeholder="请输入对应的打卡日期"  readonly></el-input>
                </el-form-item>

          <el-form-item label="员工编号" prop="eid" >
               <el-input v-model="ruleForm.eid" placeholder="请输入对应的员工编号"></el-input>
          </el-form-item>

          <el-form-item label="员工姓名" prop="ename" >
              <el-input v-model="ruleForm.ename" placeholder="请输入对应的员工姓名"></el-input>
          </el-form-item>

          <el-form-item label="员工性别">
                <el-radio-group v-model="ruleForm.egender">
                <el-radio :label="1" >男</el-radio>
                <el-radio :label="2">女</el-radio>
                 </el-radio-group>
            </el-form-item>

          <el-form-item label="员工电话" prop="ephone" >
                <el-input v-model="ruleForm.ephone" placeholder="请输入对应的员工电话"></el-input>
            </el-form-item>  
          
               
           <el-form-item>
                <el-button type="primary" size="medium" @click="submitForm">打卡</el-button>
            </el-form-item>
          
      </el-form>
     </div>
    </el-drawer>

     
</template>

<script>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { ElNotification } from 'element-plus'

export default {
  name: "basetable",
  setup() {

    // 定义变量
    const ruleForm = ref({
      edate: ref(new Date()),
      eid: "",
      ename: "",
      egender: "",
      ephone:"",
      
    })


    const rules = {
      eid: [
        { required: true, message: '请输入员工编号', trigger: 'blur' },
      ],
      
      ename: [
        { required: true, message: '请输入员工姓名', trigger: 'blur' },
      ],
      egender: [
        { required: true, message: '请输入员工电话', trigger: 'checked' },
      ],
      ephone: [
        { required: true, message: '请输入员工电话', trigger: 'blur' },
      ]
    }


    const value = ref(new Date())

    const clock = ref(false)

    //提交
    const submitForm = () => {
      console.log(ruleForm.edate);
     axios({
        method: 'post',
        url: 'http://localhost:8080/api/clockServlet',
        data: ruleForm.value
      }).then(function (resp) {
        if (resp.data.flag === true) {
          ElNotification({
            title: 'success',
            message: '打卡成功',
            type: 'success',
          })
        } else {
          ElNotification({
            title: 'warning',
            message: '您已经打过卡了,不需要重复打卡',
            type: 'warning',
          })
        }


      });

    }

    return {
      ruleForm,
      submitForm,
      clock,
      value,
      rules,
    }

  }

}


</script>

<style>
.custom-button {
  width: 400px;
}
</style>

